<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>登录</title>
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <link rel="stylesheet" href="css/login.css">
</head>

<body>
  <div class="card text-center" style="margin-bottom: 3rem;background:rgba(110, 108, 108, 0.5);">
    <div class="card-header">
      <h5>欢迎来到问卷调查管理系统</h5>
    </div>
    <div class="card-body">
      <h5 class="card-title">请登录后发言</h5>
      <p class="card-text">友情提示：你很帅，扣分请手下留情一点^^</p>
    </div>
    <div class="card-footer text-muted">

    </div>
  </div>
  <div>
    <div class="row align-items-center">
      <div class="col"></div>
      <div class="col">
        <div class="alert alert-danger text-center invisible" role="alert"
          style="width: 42rem;background: rgba(156, 152, 152, 0.5)">
          <strong>提示：</strong>
          <font id="msgId" style="color: #000;">这里有一些错误，看着就好</font>
        </div>
      </div>
      <div class="col"></div>
    </div>
    <div class="card"
      style="width: 50rem;margin: auto; margin-top: 10rem;height: 28rem;background: rgba(156, 152, 152, 0.5)">
      <form  id="loginForm" style="background: rgba(156, 152, 152, 0.5);">
        <h5 class="card-title" style="text-align: center;">欢迎来到神的领域</h5>
        <div class="form-group">
            <label for="exampleInputEmail1">用户名：</label>
            <input type="text" style="background: rgba(156, 152, 152, 0.5);" class="form-control"
                 aria-describedby="emailHelp" id="username" name="username" placeholder="username">

        </div>
        <div class="form-group">
            <label for="exampleInputPassword1">密码：</label>
            <input type="password" style="background: rgba(156, 152, 152, 0.5);" class="form-control"
            id="password" name="password" placeholder="password">
        </div>
        <div class="form-group form-check">
            <input type="checkbox" class="form-check-input" id="exampleCheck1">
            <label class="form-check-label" for="exampleCheck1">记住我</label>
        </div>
        <button type="button" class="btn" style="width: 7rem;" onclick="login()">登录</button>
        <button type="button" class="btn" style="width: 7rem;" onclick='register()'>注册</button>
    </form>
    </div>
  </div>

  <script src="js/jquery-3.6.0.min.js"></script>
  <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script>
      function register(){
            window.location.href='/register';
        }
        function login() {
            // 获取表单数据
            let uid = $('#username').val();
            let pwd = $('#password').val();
            // 判断用户名、密码是否为空，为空则提示；不为空则向服务器提交
            if (uid.length > 0 && pwd.length > 0) {
                axios({
                    method: 'post',
                    url: '/loginDone',
                    data: $('#loginForm').serialize(),
                }).then(function (res) {
                    // axios工具下，服务器真正返回的数据在返回对象的data中
                    res = res.data;
                    if (res.code === 200) {
                        window.location.href = '/';
                    } else {
                        alert_fn(res.msg);
                        console.log(res.msg);
                    }
                }).catch((err) => {
                    alert_fn(err);
                    console.log(err);
                });
            } else {
                alert_fn('用户名、密码不能为空');
            }
        }
    function alert_fn(msg) {
      $('#msgId').text(msg);
      $('.alert').removeClass('invisible');
      setTimeout(() => {
        $('.alert').addClass('invisible');
      }, 3000);
    }
  </script>
</body>

</html>